<template>
  <div class="ele-body ele-body-card">
    <!-- 顶部卡片 -->
    <a-card
      :bordered="false"
      :body-style="{padding: '20px'}">
      <div class="ele-cell workplace-user-card">
        <div class="ele-cell-content ele-cell">
          <a-avatar :size="68" :src="loginUser.avatar"/>
          <div class="ele-cell-content">
            <h4 class="ele-elip">早安，{{ loginUser.nickname }}，开始您一天的工作吧！</h4>
            <div class="ele-elip ele-text-secondary">
              <cloud-outlined/>
              <em>今日多云转阴，18℃ - 22℃，出门记得穿外套哦~</em>
            </div>
          </div>
        </div>
      </div>
    </a-card>
    <!-- 快捷方式块 -->
    <a-row :gutter="16">
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/system/user"
            class="app-link-block">
            <user-outlined class="app-link-icon"/>
            <div class="app-link-title">用户</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/material/cost"
            class="app-link-block">
            <fund-projection-screen-outlined
              class="app-link-icon"
              style="color: #ff9c6e;"/>
            <div class="app-link-title">成本管理</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/sale/vegetableMenu"
            class="app-link-block">
            <shopping-cart-outlined
              class="app-link-icon"
              style="color: #95de64;"/>
            <div class="app-link-title">菜单</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/sale/saleOrder"
            class="app-link-block">
            <file-search-outlined
              class="app-link-icon"
              style="color: #b37feb;"/>
            <div class="app-link-title">销售订单</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/material/materialOrder"
            class="app-link-block">
            <credit-card-outlined
              class="app-link-icon"
              style="color: #ffd666;"/>
            <div class="app-link-title">材料订单</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/material/stockRecord"
            class="app-link-block">
            <control-outlined
              class="app-link-icon"
              style="color: #ffc069;"/>
            <div class="app-link-title">库存管理</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/material/material"
            class="app-link-block">
            <mail-outlined
              class="app-link-icon"
              style="color: #5cdbd3;"/>
            <div class="app-link-title">材料</div>
          </router-link>
        </a-card>
      </a-col>
      <a-col :lg="3" :md="6" :sm="12" :xs="12">
        <a-card
          :bordered="false"
          hoverable
          :body-style="{padding: 0}">
          <router-link
            to="/restaurant/sale/paymentRecord"
            class="app-link-block">
            <tags-outlined
              class="app-link-icon"
              style="color: #ff85c0;"/>
            <div class="app-link-title">收款管理</div>
          </router-link>
        </a-card>
      </a-col>

    </a-row>

    <a-row :gutter="16">

<!--      <a-col :lg="12" :md="24" :sm="24" :xs="24">-->
<!--        <a-card-->
<!--          style="height: 463px"-->
<!--          title="采购任务"-->
<!--          :bordered="false"-->
<!--          :body-style="{padding: '10px 8px 10px 8px'}">-->
<!--          <div class="ant-table ant-table-middle">-->
<!--            <div class="ant-table-content">-->
<!--              <div class="ant-table-body" style="overflow-x: auto;">-->
<!--                <table style="min-width: max-content;">-->
<!--                  <thead class="ant-table-thead">-->
<!--                  <tr>-->
<!--                    <th></th>-->
<!--                    <th style="text-align: center;">任务编号</th>-->
<!--                    <th>创建时间</th>-->
<!--                    <th style="text-align: center;">状态</th>-->
<!--                  </tr>-->
<!--                  </thead>-->
<!--                  <draggable-->
<!--                    tag="tbody"-->
<!--                    item-key="id"-->
<!--                    v-model="materialOrderList"-->
<!--                    :component-data="{class: 'ant-table-tbody'}"-->
<!--                    handle=".anticon-menu"-->
<!--                    :animation="300">-->
<!--                    <template #item="{ element }">-->
<!--                      <tr>-->
<!--                        <td style="text-align: center;">-->
<!--                          <menu-outlined style="cursor: move;"/>-->
<!--                        </td>-->
<!--                        <td style="text-align: center;padding: 8px;">-->
<!--                          <a>{{ element.eid }}</a>-->
<!--                        </td>-->
<!--                        <td class="ele-text-success">-->
<!--                          <span>{{ element.createDatetime }}</span>-->
<!--                        </td>-->
<!--                        <td style="text-align: center;">-->
<!--                          <a-tag :color="['error','warning','success','processing'][element.state]">{{-->
<!--                              element.status-->
<!--                            }}-->
<!--                          </a-tag>-->
<!--                        </td>-->
<!--                      </tr>-->
<!--                    </template>-->
<!--                  </draggable>-->
<!--                </table>-->
<!--              </div>-->
<!--            </div>-->
<!--          </div>-->
<!--        </a-card>-->
<!--      </a-col>-->

      <!-- 今天计划销售额 -->
<!--      <a-col :lg="8" :md="24" :sm="24" :xs="24">
        <a-card title="今天计划销售额" :bordered="false" style="height: 463px">
          <div class="workplace-goal-group">
            <a-progress
              type="dashboard"
              :percent="sales"
              :show-info="false"
              :width="181"
              :stroke-width="4"/>
            <div class="workplace-goal-content">
              <ele-tag
                color="blue"
                size="large"
                shape="circle">
                <trophy-outlined/>
              </ele-tag>
              <div class="workplace-goal-num">1000元</div>
            </div>
          </div>
        </a-card>
      </a-col>-->

      <!-- 供应商 -->
<!--      <a-col :lg="12" :md="24" :sm="24" :xs="24">-->
<!--        <a-card-->
<!--          style="height: 463px"-->
<!--          title="供应商"-->
<!--          :bordered="false"-->
<!--          :body-style="{padding: 0}">-->
<!--          <div-->
<!--            v-for="(item,index) in supplierList"-->
<!--            :key="index"-->
<!--            class="ele-cell user-list-item">-->
<!--            <div class="ele-cell-content">-->
<!--              <div class="ele-cell-title">{{ item.name }}</div>-->
<!--              <div class="ele-cell-desc">{{ item.remark }}</div>-->
<!--            </div>-->
<!--            <div class="ele-text-success">联系电话：{{ item.contactTel }}</div>-->
<!--            &lt;!&ndash;            <a-rate :value=item.state disabled/>&ndash;&gt;-->

<!--          </div>-->
<!--        </a-card>-->
<!--      </a-col>-->
    </a-row>
  </div>
</template>

<script>
import {
  CloudOutlined,
  UserOutlined,
  ShoppingCartOutlined,
  FundProjectionScreenOutlined,
  FileSearchOutlined,
  CreditCardOutlined,
  MailOutlined,
  TagsOutlined,
  ControlOutlined,
  // MenuOutlined,
  // TrophyOutlined
} from '@ant-design/icons-vue';
// import draggable from 'vuedraggable';
// import {ref} from "vue";
// import {SupplierService} from "@/views/restaurant/material/supplier/supplierService";
// import {MaterialOrderService} from "@/views/restaurant/material/materialOrder/materialOrderService";

export default {
  name: 'DashboardWorkplace',
  components: {
    CloudOutlined,
    UserOutlined,
    ShoppingCartOutlined,
    FundProjectionScreenOutlined,
    FileSearchOutlined,
    CreditCardOutlined,
    MailOutlined,
    TagsOutlined,
    ControlOutlined,
    // MenuOutlined,
    // TrophyOutlined,
    // draggable
  },
  setup() {
    // let supplierList = ref([])
    // let materialOrderList = ref([])

    // const SupplierQueryParams = {}
    // SupplierQueryParams.pageSize = 5
    // SupplierQueryParams.currentPage = 1
    // SupplierQueryParams.orderBys = [{property: "t0.createDatetime", order: "desc"}]
    // SupplierService.findSuppliers(SupplierQueryParams).then(res => {
    //   console.log(res)
    //   supplierList.value = res.data.datas
    // })

    // const MaterialOrderQueryParams = {}
    // MaterialOrderQueryParams.pageSize = 7
    // MaterialOrderQueryParams.currentPage = 1
    // MaterialOrderQueryParams.orderBys = [
    //   {property: "substringIndex(\"'审核通过','打回','待验收','待退货','待入库','待审核','已入库','已退货','待取消'\",t0.status,1)", order: ""}
    // ]
    // MaterialOrderService.findMaterialOrders(MaterialOrderQueryParams).then(res => {
    //   console.log(res)
    //   materialOrderList.value = res.data.datas
    //   getState()
    // })

    // const getState = () =>{
    //   for (let i = 0; i < materialOrderList.value.length; i++) {
    //     console.log(materialOrderList.value[i].status)
    //     if (materialOrderList.value[i].status === '打回'
    //       || materialOrderList.value[i].status === '待退货') {
    //       materialOrderList.value[i].state = 0
    //     } else if (materialOrderList.value[i].status === '审核通过') {
    //       materialOrderList.value[i].state = 1
    //     } else if (materialOrderList.value[i].status === '待验收'
    //       || materialOrderList.value[i].status === '待入库'
    //       || materialOrderList.value[i].status === '待审核') {
    //       materialOrderList.value[i].state = 3
    //     } else {
    //       materialOrderList.value[i].state = 2
    //     }
    //   }
    // }



    return {
      // supplierList,
      // materialOrderList,
      // getState
    }
  },
  data() {
    return {};
  },
  computed: {
    // 当前登录用户信息
    loginUser() {
      return this.$store.state.user.user;
    }
  }
}
</script>

<style scoped>
/** 用户卡片 */
.workplace-user-card .ele-cell-content {
  overflow: hidden;
}

.workplace-user-card h4 {
  margin-bottom: 6px;
}

.workplace-count-group {
  white-space: nowrap;
  text-align: right;
  flex-shrink: 0;
}

.workplace-count-item {
  display: inline-block;
  margin: 0 4px 0 24px;
}

.workplace-count-name {
  margin-left: 8px;
}

@media screen and (max-width: 992px) {
  .workplace-count-item {
    margin: 0 2px 0 12px;
  }
}

@media screen and (max-width: 768px) {
  .workplace-user-card {
    display: block;
  }

  .workplace-count-group {
    margin-top: 8px;
  }
}

/** 快捷方式 */
.app-link-block {
  padding: 12px;
  text-align: center;
  display: block;
  color: inherit;
}

.app-link-block .app-link-icon {
  color: #69c0ff;
  font-size: 30px;
  margin: 6px 0 10px 0;
}

/** 时间轴 */
.ele-scrollbar-hover :deep(.ant-timeline-item-last > .ant-timeline-item-content) {
  min-height: auto;
}

/** 本月目标 */
.workplace-goal-group {
  padding: 48px 0;
  text-align: center;
  position: relative;
}

.workplace-goal-group .workplace-goal-content {
  position: absolute;
  top: 90px;
  left: 0;
  width: 100%;
}

.workplace-goal-group .workplace-goal-num {
  font-size: 40px;
}

/** 小组成员 */
.user-list-item {
  padding: 16px 18px;
}

.user-list-item + .user-list-item {
  border-top: 1px solid hsla(0, 0%, 60%, .15);
}

/** 表格拖拽 */
.ant-table-tbody tr.sortable-chosen {
  background: hsla(0, 0%, 60%, .1) !important;
}

.ant-table-tbody tr.sortable-chosen td {
  background: none !important;
}

/deep/ .ant-rate {
  font-size: 16px !important;
}
</style>
